<template>
  <view class="van-tree">
    <view v-for="(item, index) in datalist" :key="index">
      <view class="father-name">
        <!-- 判断是否是父节点 -->
        <svg-icon
          class="svg-icon"
          v-if="item.children && item.children.length"
          :iconClass="item.expanded ? 'arrow-down' : 'arrow-right'"
          @click="nodeClick(item)"
        ></svg-icon>
        <!-- 判断是否是最后一个子节点 -->
        <svg-icon v-else iconClass=""></svg-icon>

        <!-- 判断是否是父节点 -->
        <text
          v-if="item.children && item.children.length"
          class="father-level-name"
          @click="nodeClick(item)"
          >{{ item.name }}</text
        >
        <!-- 判断是否是最后一个子节点 -->
        <text v-else class="father-level-name" @click="lastNameClick(item)">{{
          item.name
        }}</text>
      </view>

      <!-- 判断是否展开 -->
      <view v-if="item.expanded">
        <avan-rec
          v-if="item.children && item.children.length"
          :treeData="item.children"
          class="levle-name"
        ></avan-rec>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { deepClone, getAllNodeKeys } from "./utils";
const props = defineProps({
  treeData: {
    type: Array,
    default: [],
  },
});
const { treeData } = toRefs(props);

const datalist = ref([]);

// 获取当前实例
const proxy = getCurrentInstance();

initData();
/**
 * 初始化数据结构
 */
function initData() {

  datalist.value = deepClone(treeData.value);
  console.log("datalist.value ======", datalist.value, treeData.value);
}

function nodeClick(data: any) {
  console.log("data ====== 点击父节点", data);

  data.expanded = !data.expanded;
}
function lastNameClick(data: any) {
  console.log("data ====== 最后一个子节点", data);
  console.log("treeData.value ======", treeData.value);
}
</script>

<style lang="scss" scoped>
.father-name {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.father-level-name {
  margin-left: 5px;
}
.levle-name {
  margin-left: 15px;
}
.svg-icon {
  margin-right: 5px;
}
</style>